<template>
  <div class="home f-d-c overflow-scroll" ref="homeRef" @scroll="homeScroll">
    <jiansuo
      @searchButton="searchButton"
      @moxingClick="moxingClick"
      @checkponclick="checkponclick"
      @dimoclick="dimoclick"
      @Advancedsearch="Advancedsearch"
      @sorttype="sorttype"
      @time="time"
      @isPrompt="isPromptClick"
      @haModel="haModelClick"
    ></jiansuo>

    <div class="my-img-box">
      <Waterfall
        scrollBodySelector=".home"
        :distanceToScroll="500"
        :objsearch="{
          searchType,
          moxingzhonglei,
          dimoxuanze,
          checkponiecurrent,
          AdvancedsearchList,
          sortid,
          timeid,
          isPrompt,
          haModel,
        }"
      ></Waterfall>
    </div>
    <!-- :searchType="searchType"
        :moxingzhonglei="moxingzhonglei"
        :dimoxuanze="dimoxuanze"
        :checkponiecurrent="checkponiecurrent"
        :AdvancedsearchList="AdvancedsearchList"
        :sortid="sortid"
        :timeid="timeid" -->
    <div class="wenhao toTopImg click" @click.stop="toTop">
      <svg-icon name="icon-fhdb" style="font-size: 54px"></svg-icon>
      <!-- <img src="../../assets/image/icon-fhdb.png" alt="" /> -->
    </div>

    <div
      class="wenhao click"
      @click.stop="openwenhao"
      v-ClickOutside="() => (openwenCheck = false)"
    >
      <svg-icon name="whdb" style="font-size: 54px"></svg-icon>

      <!-- <img src="../../assets/image/icon-wen@2x.png" alt="" /> -->
      <div class="wenhaolist" v-if="openwenCheck">
        <div
          class="wenhao_item f-a-c f-j-a-c"
          v-for="(item, index) in wenhaoList"
          :key="index"
          @click="wenhaoListClick(index + 1)"
        >
          <svg-icon class="svg1" :name="item.svg1"></svg-icon>
          <svg-icon class="svg" :name="item.svg"></svg-icon>
          <span>{{ item.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Waterfall from "./components/waterfall.vue";
import { ElMessage } from "element-plus";
// import { classification } from "@/utils/advanceditem.js";
import { userinfo, searchList, banner, bindWechat } from "@/axios/api.js";
// import goodlist from "./components/goodlist.vue";
import jiansuo from "./components/search.vue";
import { useRouter } from "vue-router";
import ClickOutside from "element-plus/lib/directives/click-outside/index";

import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  directives: { ClickOutside },
  components: {
    jiansuo,
    // goodlist,
    Waterfall,
  },
  setup() {
    const isMounted = ref(false);
    const router = useRouter();
    const { proxy } = getCurrentInstance();

    const homeRef = ref(null);
    const bindcodebox = ref(null);
    let store = useStore();
    let data = reactive({
      bannerHeight: 320,

      current: 0,
      openwenCheck: false,
      wenhaoList: [
        // {
        //   svg: "icon-dingbu",
        //   svg1: "icon-dingbu-wx",
        //   text: "返回顶部",
        // },
        {
          svg1: "icon-shequn",
          svg: "icon-shequn-yx",

          text: "加入社群",
        },
        {
          svg1: "icon-xinshou",
          svg: "icon-xinshou-yx",
          text: "新手入门",
        },
        {
          svg1: "icon-shangwu",

          svg: "icon-shangwu-yx",
          text: "商务合作",
        },

        {
          svg1: "icon-zanzhu",
          svg: "icon-zanzhu-yx",
          text: "赞助我们",
        },
        {
          svg1: "icon-api",
          svg: "icon-api-yx",
          text: "API接口",
        },
      ],
      radio1: 0,
      timeLIst: [
        {
          text: "全部",
        },
        {
          text: "本年",
        },
        {
          text: "本月",
        },
        {
          text: "本周",
        },
        {
          text: "本天",
        },
      ],
      sortListCurrent: 0,
      sortList: [],
      priceMaskCurrent: 0,
      priceMask: [
        {
          title: "全部",
        },
        {
          title: "免费",
        },
        {
          title: "￥200以下",
        },
        {
          title: "￥200-300",
        },
        {
          title: "￥300-400",
        },
        {
          title: "￥400-600",
        },
        {
          title: "￥600-800",
        },
        {
          title: "￥800-1000",
        },
        {
          title: "1000以上",
        },
      ],
      marks: {
        0: "0",
        500: "500",
        1000: "1000",
        1500: "1500",
        2000: "2000",
      },
      value1: 0,
      advanceditemlist: [],
      blocks: [],
      advancedList: [
        {
          title: "高级搜索",
        },
        {
          title: "价格",
        },
        {
          title: "排序",
        },
        {
          title: "时间",
        },
      ],
      menuList: [
        {
          menucurrent: 0,
          type: "模型种类",
          listItem: [
            {
              title: "全部",
              value: -1,
            },
            {
              title: "Checkpoint",
              value: 0,
            },
            {
              title: "Textual Inversion",
              value: 1,
            },
            {
              title: "Hypemetwork",
              value: 2,
            },
            {
              title: "Aesthetic Gradient",
              value: 3,
            },
            {
              title: "LoRA",
              value: 4,
            },
            {
              title: "LyCORIS",
              value: 5,
            },
          ],
        },
        {
          menucurrent: 0,

          type: "Checkpoint种类",
          listItem: [
            {
              title: "全部",
            },
            {
              title: "训练",
            },
            {
              title: "融合",
            },
          ],
        },
        {
          menucurrent: 0,

          type: "底模版本",
          listItem: [
            {
              title: "全部",
            },
            {
              title: "SD 1.5",
            },
            {
              title: "SD 1.6",
            },
            {
              title: "SD 2.0",
            },
            {
              title: "其他",
            },
          ],
        },
      ],
      pictureList: [
        {
          menucurrent: 0,
          type: "软件",
          listItem: [
            {
              title: "全部",
            },
            {
              title: "Stable Diffusion",
            },
            {
              title: "Midjourney",
            },
            {
              title: "Dall-e",
            },
            {
              title: "其他",
            },
          ],
        },
        {
          menucurrent: 0,
          type: "提示词",
          listItem: [
            {
              title: "全部",
            },
            {
              title: "有",
            },
            {
              title: "无",
            },
          ],
        },
        {
          menucurrent: 0,
          type: "模型链接",
          listItem: [
            {
              title: "全部",
            },
            {
              title: "有",
            },
            {
              title: "无",
            },
          ],
        },
      ],
      menuCheck: false,
      current: 0,
      jiansuolist: [
        {
          img: new URL(
            "../../assets/image/icon-quanbu@2x.png",
            import.meta.url
          ),
          imgs: new URL("../../assets/image/moxingl.png", import.meta.url).href,
          text: "全部",
        },
        {
          img: new URL("../../assets/image/wmoxing.png", import.meta.url).href,
          imgs: new URL(
            "../../assets/image/icon-moxing@2x.png",
            import.meta.url
          ).href,
          text: "模型",
          xiala: new URL(
            "../../assets/image/icon-shang@2x.png",
            import.meta.url
          ),
          xialal: new URL("../../assets/image/lsia.png", import.meta.url),
        },
        {
          img: new URL("../../assets/image/wt.png", import.meta.url).href,
          imgs: new URL(
            "../../assets/image/icon-tupian@2x.png",
            import.meta.url
          ).href,
          text: "图片",
          xiala: new URL(
            "../../assets/image/icon-shang@2x.png",
            import.meta.url
          ),
          xialal: new URL("../../assets/image/lsia.png", import.meta.url),
        },
      ],
      advacedCurrent: -1,
      advacedCheck: false,
      advanceditemlistCheck: false,
      gaojicurrent: 0,
      searchType: 1, // 搜索type
      moxingzhonglei: -1, //模型种类
      checkponiecurrent: -1,
      dimoxuanze: -1,
      AdvancedsearchList: [], //高级搜索数组
      sortid: 0, // 排序id
      timeid: 0, // 时间筛选
      screenWidth: 0, // 屏幕宽度
      isPrompt: 0, // 是否有提示词
      haModel: 0, // 是否有提示词
      bannerList: [
        // {
        //   img: new URL("../../assets/img/aaa.png", import.meta.url),
        // },
      ],
    });
    let accessToken = computed(() => {
      return store.state.accessToken;
    });
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    onMounted(() => {
      data.screenWidth = window.innerWidth;
      setSize();
      getBanner();
      // data.advanceditemlist = classification;
      isMounted.value = true;
      if (accessToken.value) {
        getuserinfo();
      }
      store.commit("setShowBottom", false);
    });

    // 获取到code以后 绑定wechat
    let getcodebinWwchat = (codes) => {
      bindWechat({ code: codes }).then((res) => {});
    };
    let timer = null;
    // 页面滚动 显示底部备案
    let homeScroll = (e) => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        if (e.target.scrollTop < 800) {
          store.commit("setShowBottom", false);
        } else {
          store.commit("setShowBottom", true);
        }
      }, 200);
    };

    // onUnmounted(() => {
    //   store.commit("setShowBottom", true);
    //   console.log(456789)
    // });

    // 获取banner图
    let getBanner = () => {
      banner().then((res) => {
        data.bannerList = res.data;
      });
    };
    let setSize = () => {
      data.bannerHeight = (420 / 2560) * data.screenWidth;
      // console.log(data.bannerHeight);
      if (data.bannerHeight > 420) data.bannerHeight = 420;
      if (data.bannerHeight < 360) data.bannerHeight = 360;
    };
    // 时间筛选
    let time = (type) => {
      data.timeid = type;
    };
    // 排序
    let sorttype = (type) => {
      data.sortid = type;
    };
    // 获取用户信息
    let getuserinfo = () => {
      userinfo().then((res) => {
        let dataslist = res.data;
        dataslist.mininfo = store.state.minUserInfo;
        store.commit("saveUserInfo", dataslist);
        store.commit("saveUserDataInfo", {
          type: "id",
          data: userInfo.value.userId,
        });
      });
    };
    // 高级搜索多选数组
    let Advancedsearch = (value) => {
      data.AdvancedsearchList = JSON.parse(value);
    };
    //是否有提示词
    let isPromptClick = (value) => {
      data.isPrompt = value;
    };
    //是否有模型链接
    let haModelClick = (value) => {
      console.log(value, "valueeee");
      data.haModel = value;
    };
    // 底模选择
    let dimoclick = (value) => {
      data.dimoxuanze = value;
    };
    // checkpoint 种类
    let checkponclick = (value) => {
      console.log(value);
      data.checkponiecurrent = value;
    };
    // 模型种类搜索按钮
    let moxingClick = (value) => {
      data.moxingzhonglei = value;
    };
    // 全部 模型 图片搜索按钮
    let searchButton = (val) => {
      data.searchType = val;
    };
    // 高级选择
    let listItemTypeCLICK = (item, index) => {
      //   console.log(index);
      //   data.gaojicurrent = index;
      item.menucurrent = index;
    };
    let advancedListClicks = (index) => {
      data.advanceditemlistCheck = !data.advanceditemlistCheck;
    };
    let advanceditemlistClick = (index) => {
      //   if (index == 0) {
      //     data.advacedCheck = false;
      //     return;
      //   }
      //   data.advanceditemlistCheck = true;
    };
    //高级选择
    let advancedListClick = (indexs) => {
      data.advacedCurrent = indexs;
      data.advacedCheck = !data.advacedCheck;
      data.advanceditemlistCheck = false;
    };
    // 模型选择
    let menuListCLick = (item, indexs) => {
      item.menucurrent = indexs;
      return ElMessage.error("暂未开放");
    };
    // 价格选择
    let priceMaskClick = (index) => {
      data.priceMaskCurrent = index;
    };
    // 类别
    let jiansuoClick = (index) => {
      if (data.menuCheck) {
        data.menuCheck = false;
        data.current = index;
      } else {
        data.menuCheck = !data.menuCheck;
        data.current = index;
      }
    };
    // 问号列表
    let openwenhao = () => {
      data.openwenCheck = !data.openwenCheck;
    };

    let wenhaoListClick = (index) => {
      router.push({
        path: "/document",
        query: { id: index },
      });
    };

    // 回到顶部
    let toTop = () => {
      // window.scrollTo(0, 0);
      homeRef.value.scrollTop = 0;
    };

    //价格收费免费选择
    let pricechange = () => {
      console.log(213123);
    };
    // 比赛
    let gocontest = (item) => {
      // return;
      let detail = item.detail;
      var splitArr = detail.split("?");
      var paramsPart = splitArr[1];
      var params = paramsPart.split("=");
      var listids = params[1];
      router.push({
        path: "/" + splitArr[0],
        query: {
          listid: listids,
        },
      });
    };
    let handleResize = () => {
      // 窗口大小改变时重新计算高度
      data.screenWidth = window.innerWidth;
      setSize();
    };
    return {
      userInfo,
      bindcodebox,
      homeScroll,
      homeRef,
      isPromptClick,
      haModelClick,
      getBanner,
      handleResize,
      setSize,
      gocontest,
      toTop,
      time,
      sorttype,
      Advancedsearch,
      checkponclick,
      dimoclick,
      moxingClick,
      searchButton,
      getuserinfo,
      wenhaoListClick,
      openwenhao,
      pricechange,
      priceMaskClick,
      isMounted,
      listItemTypeCLICK,
      advancedListClicks,
      advanceditemlistClick,
      advancedListClick,
      menuListCLick,
      jiansuoClick,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  overflow: auto;
  // background: red;
}

// .padd {
//   position: relative;
//   z-index: 1;
//   width: 100%;
//   background-color: #fff;
//   height: 120px;
//   // height: 9px;
// }
.erweima {
  opacity: 0;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 248px;
  z-index: 9999;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);

  > img {
    width: 180px;
    height: 180px;
  }
  > span {
    margin-top: 10px;
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
  }
}
.erbutton {
  width: 220px;
  height: 52px;
  position: absolute;
  bottom: 66px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  // padding: 11px 74px;
  &:hover {
    .erweima {
      opacity: 1;
    }
  }
}
.imgbox {
  position: relative;

  width: 100%;
  height: 100%;
  .img {
    width: 100%;
    height: 100%;
  }
}
.swtier {
  position: absolute;
  top: -20px; /* 根据需要调整按钮的位置 */
  z-index: 1; /* 确保按钮位于走马灯上方 */
}
.lijishangchuang {
  position: absolute;
  border-radius: 10px;
  bottom: 80px;
  // border: 1px solid #000;
  padding: 10px 35px;
  left: 117px;
  font-size: 18px;
  color: #fff;
  background: #8ae4d5;
  // background: linear-gradient(-45deg,#36b9d3 0%,#4edbb8 99%);
  // background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
}
// ::-webkit-scrollbar {
//   display: none;
// }
.my-img-box {
  // margin-top: 36px;
  // width: 100%;
  // height: 100%; /* 父元素一定要指定高度 */
  padding: 0 2%;
  flex: 1;
  // overflow: auto;

  // background-color: red;

  // overflow-y: scroll; /* 一定要制定父元素超出滚动 */
}
.wenhaolist {
  position: fixed;
  right: 130px;
  bottom: 97px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  // padding: 10px 0 0 10px;
  z-index: 99;
  .wenhao_item {
    padding: 0 34px 0 10px;

    cursor: pointer;
    height: 46px;
    > span {
      margin-left: 10px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000;
    }
    .svg1 {
      display: block;
    }
    .svg {
      display: none;
    }
    &:hover {
      .svg {
        display: block;
      }
      .svg1 {
        display: none;
      }
      background: rgba(100, 200, 220, 0.12);
      > span {
        color: #64c8dc;
      }
    }
  }
}

.timeHeight {
  height: auto !important;
  left: 239px !important;
}
.sortbgcHeight {
  height: auto !important;
  left: 158px !important;
}
.sortbgc {
  background: rgba(100, 200, 220, 0.12) !important;
  > span {
    color: #67c9dc !important;
  }
}
::v-deep .el-slider__bar {
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
}
::v-deep .el-slider__runway {
  border-radius: 5px;
  background-color: #e4e7ed;
}
::v-deep .el-slider__stop {
  display: none;
}
::v-deep .el-slider__marks-text {
  margin-top: -34px;
}
::v-deep .el-slider__button {
  border: none;
  background-image: url("../../assets/image/icon-hua@2x.png");
  background-size: 100% 100%;

  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
::v-deep .el-slider__marks-text {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #000000;
}
.priceChoose {
  position: absolute;
  top: 50px;
  z-index: 10;
  right: 0;
  width: 422px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  padding: 20px;
  padding-bottom: 70px;
  .priceTop {
    > span {
      font-size: 14px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: 700;
      color: #000000;
      &:last-child {
        margin-left: 10px;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #000000;
      }
    }
  }

  .priceSetting {
    > span {
      font-size: 14px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: 700;
      color: #000000;
    }
  }
  .config {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 34px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
    cursor: pointer;
    &:active {
      opacity: 0.7;
    }
  }

  .slider-demo-block {
    padding: 0 16px;
    margin-top: 39px;
    width: 100%;
    .text {
      padding: 0 3px;
      > span {
        margin-right: 50px;
      }
    }
  }
}
.sliderBox {
  flex-wrap: wrap;
  .sliderBox_itemActice {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%) !important;
    > span {
      color: #fff !important;
    }
  }
  .sliderBox_item {
    margin-top: 10px;
    width: 120px;
    height: 46px;
    background: #f3f4f5;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
}
.advacedformBoxactive {
  border-radius: 0 10px 10px 0 !important;
}
.advacedformBox {
  padding: 20px;
  z-index: 11;
  position: absolute;
  top: 52px;
  left: 0;
  width: 282px;
  height: 520px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  .formItem {
    cursor: pointer;
    // padding: 0 10px;
    // height: 50px;
    .formType {
      .line {
        width: 2px;
        height: 16px;
        background: linear-gradient(360deg, #9ed8e6 0%, #a1f0c0 100%);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
      }
      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
    }
    .formboxactive {
      > span {
        color: #67c9dc !important;
      }
    }
    .formbox {
      margin-left: 10px;
      margin-bottom: 30px;
      flex-wrap: wrap;
      .boxitem {
        margin-right: 30px;
        margin-top: 20px;
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }
    // > img {
    //   width: 28px;
    // }

    // &:hover {
    //   background-color: #f3f4f5;
    //   > span {
    //     color: #67c9dc;
    //   }
    // }
  }
}
.advacedformactive {
  left: -140px !important;
  border-radius: 10px 0 0 10px !important;
}
.advacedform {
  z-index: 11;
  position: absolute;
  top: 52px;
  left: -10px;
  width: 140px;
  // height: 520px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  transition: all 0.3s;
  .formItem {
    cursor: pointer;
    padding: 0 10px;
    height: 50px;
    > img {
      width: 28px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    &:hover {
      border-radius: 10px;
      background-color: #f3f4f5;
      > span {
        color: #67c9dc;
      }
    }
  }
}
.advacedbox {
  cursor: pointer;
  background: #f3f4f5;
  border-radius: 10px;

  padding: 11px 10px;

  margin-right: 10px;
  > span {
    margin-right: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #64c8dc;
  }
  > img {
    width: 19px;
    height: 19px;
  }
}
.wenhao {
  position: fixed;
  right: 56px;
  bottom: 87px;
  z-index: 10;
  > img {
    width: 56px;
  }
}
.toTopImg {
  bottom: 140px;
}
.homepage {
}
.jiansuo {
  position: relative;
  .active {
    cursor: pointer;
    margin-left: 10px;

    width: 98px;
    height: 40px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    &:first-child {
      margin-left: 0;
    }
    > span {
      padding: 0 13px 0 1px;

      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }
    > img {
      width: 16px;
      height: 16px;
    }
    &:active {
      opacity: 0.7;
    }
  }
  .item {
    cursor: pointer;
    margin-left: 10px;
    width: 98px;
    height: 40px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #64c8dc;
    &:first-child {
      margin-left: 0;
    }
    > img {
      width: 16px;
      height: 16px;
    }
    > span {
      padding: 0 13px 0 1px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #64c8dc;
    }
    &:active {
      opacity: 0.7;
    }
  }
}
.leftmenu {
  left: 218px !important;
  bottom: -437px !important;
}
.menu {
  z-index: 10;
  position: absolute;
  bottom: -545px;
  left: 110px;
  width: 511px;
  //   height: 494px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  padding: 20px;
  .menuswaeic {
    width: 100%;
    height: 100%;
    .type {
      > span {
        display: block;
        margin-bottom: 9px;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
      &:nth-child(2) {
        margin-top: 40px;
      }
      &:nth-child(3) {
        margin-top: 40px;
      }
      .boxactice {
        background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%) !important;
        > span {
          color: #fff !important;
        }
      }
      .chooseitem {
        flex-wrap: wrap;
        .box {
          cursor: pointer;
          margin-right: 9px;
          margin-bottom: 9px;
          width: 31%;
          height: 46px;
          background: #f3f4f5;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;
          &:last-child {
            margin-right: 0;
          }
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }
        }
      }
    }
  }
}
.advanced {
  position: relative;
  .advanded_item {
    padding: 11px 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 10px;
    > span {
      margin-right: 4px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    > img {
      width: 19px;
      height: 19px;
    }
  }
}

// 顶部banner图
.home-banner {
  // padding-bottom: 160px;
  position: relative;
  .banner-img {
    width: 100%;
    // height: 420px;
    // object-fit: cover;
  }
  .erweima {
    position: absolute;
    top: 35px;
    z-index: 9;
    right: 32%;
    width: 430px;
    height: 207px;
  }

  .banner-info-box {
    position: absolute;
    width: 550px;
    top: 54px;
    // left: 90px;
    left: 5%;

    .banner-info-title {
      // color: #313b4d;
      // font-size: 42px;
      // font-weight: bold;
      > img {
        width: 100%;
      }
    }
    .banner-info-text {
      font-size: 16px;
      color: #313b4d;
      line-height: 28px;
      padding-top: 10px;
    }
    .banner-info-btn {
      background: linear-gradient(-45deg, #36b9d3 0%, #4edbb8 99%);
      border-radius: 10px;
      width: 120px;
      height: 40px;
      margin-top: 20px;
      color: #ffffff;
      font-weight: bold;
      cursor: pointer;
      user-select: none;
      transition: all 0.3s;
      &:active {
        opacity: 0.7;
        transform: scale(0.98);
      }
    }
  }

  .banner-right-img {
    position: absolute;
    top: 0;
    height: 280px;
    z-index: 8;
    right: 17%;
  }
}
</style>
